<html>
<head>
    <title>工程责任清单</title>


    <!-- import Vue before Element -->
    <script src="../../../assets/bundle.js"></script>
    <script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='../../../assets/jquery.qrcode.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
    <script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>
    <link rel="stylesheet" href="../../../swipebox.css">
    <link rel="stylesheet" href="../../../assets/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">

    <style>
        body {
            background: #F0F2F6;
        }

        .main-head {
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer {
            height: 200px;
        }

        td {
            text-align: center;
            height: 50px; /*这里需要自己调整，根据自己的需求调整高度*/
            position: relative;
        }

        td[class=first] {
            width: 100px;
        }

        td[class=first]:before {
            content: "";
            position: absolute;
            width: 1px;
            height: 160px;
            top: 0;
            left: 0;
            background-color: #000;
            display: block;
            transform: rotate(-73deg);
            transform-origin: top;
            -ms-transform: rotate(-73deg);
            -ms-transform-origin: top;
        }

        .title1 {
            position: absolute;
            top: 0px;
            right: 0px;
        }

        .title2 {
            position: absolute;
            top: 26px;
            right: 70px;
        }

        .chart-wrap {

            height: 700px;
            width: 100%;
        }

        .popClass {
            height: 400px;
        }

        .el-table .warning-row {
            color: red;
        }

        .el-table .success-row {
            background: #39b54a;
        }
    </style>
</head>
<body>
<div class="page" id="page-monitor">

    <div class="page-main">
        <el-row>
            <el-col :span="24">
                <div class="main-head">
                    <el-form :inline="true" size="small">
                        <el-form-item label="证书名称">
                            <el-input placeholder="证书名称" v-model="param.certName" style="width: 150px;"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="search">查询</el-button>
                            <el-button type="success" @click="addClick">新增</el-button>
                            <!--<el-button type="warning" @click="exportClick">导出</el-button>-->
                        </el-form-item>
                    </el-form>
                </div>

            </el-col>
        </el-row>

        <el-row>
            <el-col :span="24">
                <el-table :data="tableData" :row-class-name="tableRowClassName" :border="true" size="mini"
                          style="width: 100%;margin-bottom: 50px">
                    <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
                    <el-table-column prop="certName" label="证书名称" align="center"></el-table-column>
                    <el-table-column prop="certId" label="证书编号" align="center">
                    </el-table-column>
                    <el-table-column prop="certDate" label="获得证书日期" align="center">
                        <template slot-scope="scope">
                            {{scope.row.certDate.replace('T'," ")}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="certValidDate" label="有效日期" align="center">
                        <template slot-scope="scope">
                            {{scope.row.certValidDate.replace('T'," ")}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="certImage" label="证书照片" align="center">
                        <template slot-scope="scope">
                            <template v-if="scope.row.certImage">
                                <el-popover placement="right" width="300" trigger="hover" popper-class="popClass">
                                    <img :src="imageUrl+scope.row.certImage"
                                         style="max-width:600px;max-height: 380px "/>
                                    <img :src="imageUrl+scope.row.certImage" slot="reference"
                                         style="max-width:80px;max-height: 80px "/>
                                </el-popover>

                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column prop="certCheckFlag" label="审核状态" align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.certCheckFlag==0">
                                <el-button type="info" size="small" @click="HandleAcess(scope.row,1)"
                                           :disabled="roleId==6">未审核
                                </el-button>
                            </div>
                            <div v-if="scope.row.certCheckFlag==1">
                                <el-button type="success" size="small" @click="HandleAcess(scope.row,2)"
                                           :disabled="roleId==6">同意
                                </el-button>
                            </div>
                            <div v-if="scope.row.certCheckFlag==2">
                                <el-button type="warning" size="small" @click="HandleAcess(scope.row,1)"
                                           :disabled="roleId==6">驳回
                                </el-button>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="300">
                        <template slot-scope="scope">
                            <el-button @click="handleEdit(scope.row)" round size="mini" icon="el-icon-edit"
                                       type="primary"></el-button>
                            <el-button size="mini" round type="primary" icon="el-icon-upload"
                                       @click="handleUpload(scope.row)"></el-button>
                            <el-button @click="delUser(scope.row)" round size="mini" icon="el-icon-delete"
                                       type="primary"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="page-footer">
                    <el-pagination background layout="prev, pager, next" :pagesize="pagesize" :total="totalCount"
                                   :current-page.sync="currentPage" @current-change="onChangePage">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>
    </div>

    <el-dialog title="新增证书" :visible.sync="AddFormVisible" :show-close="false">
        <el-form :model="form" ref="form">
            <el-form-item label="持证人" :label-width="formLabelWidth" prop="workId" :label-width="formLabelWidth" :rules="[
                                     {required:true,message:'持证人不能为空!',trigger:'blur'}
                            ]">
                <el-select v-model="form.workId">
                    <el-option
                            v-for="item in userList"
                            :key="item.Id"
                            :label="item.userName"
                            :value="item.Id" v-if="item.ParentId!=0">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="证书名称" prop="certName" :label-width="formLabelWidth" :rules="[
                                     {required:true,message:'请输入证书名称,内容不能为空!',trigger:'blur'}
                            ]">
                <el-input v-model="form.certName" autocomplete="off"></el-input>
            </el-form-item>


            <el-form-item label="证书编号" prop="certId" :label-width="formLabelWidth" :rules="[
                                     {required:true,message:'请输入证书编号,内容不能为空!',trigger:'blur'}
                            ]">
                <el-input v-model="form.certId" autocomplete="off"></el-input>
            </el-form-item>


            <el-form-item label="获得证书日期" prop="certDate" :label-width="formLabelWidth" :rules="[
                                     {required:true,message:'请输入获得证书时间,内容不能为空!',trigger:'blur'}
                            ]">
                <el-date-picker type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss"
                                v-model="form.certDate"
                                style="width: 100%;"></el-date-picker>
            </el-form-item>

            <el-form-item label="证书有效日期" prop="certValidDate" :label-width="formLabelWidth" :rules="[
                                     {required:true,message:'请输入有效日期,内容不能为空!',trigger:'blur'}
                            ]">
                <el-date-picker type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss"
                                v-model="form.certValidDate"
                                style="width: 100%;"></el-date-picker>
            </el-form-item>

            <el-form-item label="证书照片" :label-width="formLabelWidth">
                <el-upload class="upload-demo" list-type="picture" ref="upload"
                           :action="url+'/api/idm/v1/HighWayCertinfo/Add'"
                           accept=".jpeg,.jpg,.png"
                           :auto-upload="false" :headers="headers" name="certImage" :on-change="fileChange" :data="form"
                           limit="1">
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div class="el-upload__tip" slot="tip">只能上传一张jpg/png文件，</div>
                </el-upload>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="AddFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitClick">确 定</el-button>
        </div>
    </el-dialog>
    <el-dialog title="编辑证书" :visible.sync="editFormVisible" :show-close="false">
        <el-form :model="editForm" ref="editForm">

            <el-form-item label="持证人" :label-width="formLabelWidth" prop="workId" :label-width="formLabelWidth" :rules="[
                                     {required:true,message:'持证人不能为空!',trigger:'blur'}
                            ]">
                <el-select v-model="editForm.workId">
                    <el-option
                            v-for="item in userList"
                            :key="item.Id"
                            :label="item.userName"
                            :value="item.Id" v-if="item.ParentId!=0">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="证书名称" prop="certName" :label-width="formLabelWidth" :rules="[
                                     {required:true,message:'请输入证书名称,内容不能为空!',trigger:'blur'}
                            ]">
                <el-input v-model="editForm.certName" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="证书编号" prop="certId" :label-width="formLabelWidth" :rules="[
                                     {required:true,message:'请输入证书编号,内容不能为空!',trigger:'blur'}
                            ]">
                <el-input v-model="editForm.certId" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="获得证书日期" prop="certDate" :label-width="formLabelWidth" :rules="[
                                     {required:true,message:'请输入获得证书时间,内容不能为空!',trigger:'blur'}
                            ]">
                <el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期"
                                v-model="editForm.certDate"
                                style="width: 100%;"></el-date-picker>
            </el-form-item>

            <el-form-item label="证书有效日期" prop="certValidDate" :label-width="formLabelWidth" :rules="[
                                     {required:true,message:'请输入有效日期,内容不能为空!',trigger:'blur'}
                            ]">
                <el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期"
                                v-model="editForm.certValidDate"
                                style="width: 100%;"></el-date-picker>
            </el-form-item>
            <el-form-item label="证书照片" :label-width="formLabelWidth">
                <el-upload class="upload-demo" list-type="picture" ref="upload2"
                           :action="url+'/api/idm/v1/HighWayCertinfo/Update'"
                           accept=".jpeg,.jpg,.png"
                           :auto-upload="false" :headers="headers" name="certImage" :on-change="fileChange"
                           :data="editForm" limit="1">
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div class="el-upload__tip" slot="tip">只能上传一张jpg/png文件，</div>
                </el-upload>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="handCancel">取 消</el-button>
            <el-button type="primary" @click="saveClick">确 定</el-button>
        </div>
    </el-dialog>


    <el-dialog title="证书文件" :visible.sync="uploadVisible" width="60%" :before-close="handleClose">
        <el-table :data="file_list" style="width: 100%">
            <el-table-column type="index" width="50">
            </el-table-column>
            <el-table-column property="fileName" label="文件名称">
            </el-table-column>
            <el-table-column label="操作" width="120">
                <template slot-scope="scope">
                    <el-button @click="delFile(scope.row)" type="text" size="small">
                        删除
                    </el-button>
                    <el-button @click="handleDown(scope.row)" type="text" size="small">
                        下载
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-upload class="upload-demo" ref="upload3" name="filePath" :headers="headers" :data="fileData"
                   :action="url+'/api/idm/v1/HighWay/FileUpload'"
                   :on-change="fileChange" :auto-upload="false" :on-success="uploadFiles" :on-error="uploadFail"
                   limit="1">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
        </el-upload>
    </el-dialog>
</div>


<script>
    var vuePage = new Vue({
        el: '#page-monitor',
        data: {
            url: SiteConfig.webApiset,
            pagesize: 10,
            currentPage: 1,
            totalCount: 0,
            formLabelWidth: '120px',
            userList: [],
            param: {
                UserId: SiteConfig.account.id,
                workId: '',
                certName: '',
            },
            tableData: [],
            AddFormVisible: false,
            form: {},
            editFormVisible: false,
            uploadVisible: false,
            editForm: {},
            fileList: [],
            headers: {},
            imageUrl: '',
            roleId: 6,
            fileData: {
                fileName: '',
                typeId: "",
                type: '',
            },
            file_list: [],
        },
        methods: {
            handCancel() {
                this.editFormVisible = false;
                this.getWorkerDetail();
            },
            tableRowClassName(data, rowIndex) {
                let certValidDate = data.row.certValidDate ? data.row.certValidDate.replace('T', " ") : '';
                let days = TimeUtil.dateDifference(new Date(), certValidDate);
                if (days < 30) {
                    return 'warning-row';
                }
            },
            search() {
                this.getWorkerDetail();
            },
            exportClick() {
                HttpUtil.get('HighWayCertinfo/ExportCertinfoList', {
                    workId: this.param.workId
                }).success((res) => {
                    this.$message.success('导出成功');
                    window.location = SiteConfig.webApiset + res.data;
                })
            },
            addClick: function () {
                this.AddFormVisible = true;
                this.form = {
                    certName: '',
                    workId: '',
                    certId: '',
                    certDate: '',
                    certValidDate: '',
                }
            },
            handleEdit(row) {
                this.editFormVisible = true;
                this.editForm = {
                    certName: row.certName,
                    workId: parseInt(row.workId),
                    certId: row.certId,
                    certDate: row.certDate,
                    certValidDate: row.certValidDate,
                    id: row.Id,
                }
            },
            onChangePage: function (page) {
                this.currentPage = page;
                this.getWorkerDetail();
            },
            getWorkerDetail() {
                var p = {};
                p.UserId = SiteConfig.account.id;
                p.certName = this.param.certName;
                p.pagesize = this.pagesize;
                p.pageno = this.currentPage;
                p.projectNo = SiteConfig.account.projectNo;
                HttpUtil.get('HighWayCertinfo/ListPc', p).success((res) => {
                    this.tableData = res.data;
                    this.totalCount = res.total;
                })
            },
            uploadFail(res) {
                this.$message({
                    type: 'error',
                    message: '上传错误' + res.errMsg
                })
            },
            delUser(row) {
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    HttpUtil.get('HighWayCertinfo/Delete', row).success((res) => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.getWorkerDetail();
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            submitClick() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        if (this.fileList.length == 0) {
                            this.$message({
                                type: 'info',
                                message: '必须选择图片'
                            });
                            return;
                        }
                        let days = TimeUtil.dateDifference(this.form.certDate, this.form.certValidDate);
                        if (days == -1) {
                            this.$message({
                                type: 'info',
                                message: '有效时间必须大于获证书时间'
                            });
                            return;
                        }
                        console.log(this.form);
                        this.$refs.upload.submit();
                        this.$refs.upload.clearFiles();
                        this.AddFormVisible = false;
                        setTimeout(() => {
                            this.getWorkerDetail();
                        }, 1000)

                    } else {
                        this.$message.warning('*内容不能为空!')
                    }
                })

            },
            saveClick() {
                this.$refs.editForm.validate((valid) => {
                    if (valid) {
                        this.editForm = jsonUtil.deleteNull(this.editForm);
                        let days = TimeUtil.dateDifference(this.editForm.certDate, this.editForm.certValidDate);
                        if (days == -1) {
                            this.$message({
                                type: 'info',
                                message: '有效时间必须大于获证书时间'
                            });
                            return;
                        }
                        if (this.fileList.length == 0) {
                            let param = {
                                certName: this.editForm.certName,
                                workId: this.editForm.workId,
                                certId: this.editForm.certId,
                                certDate: this.editForm.certDate,
                                certValidDate: this.editForm.certValidDate,
                                id: this.editForm.id,
                            }
                            HttpUtil.get('HighWayCertinfo/Update', param).success((res) => {
                                this.editFormVisible = false;
                                this.getWorkerDetail();
                            })
                        } else {
                            this.$refs.upload2.submit();
                            this.$refs.upload2.clearFiles();
                            this.editFormVisible = false;
                            this.fileList = [];

                            setTimeout(() => {
                                this.getWorkerDetail();
                            }, 1000)
                        }
                    } else {
                        this.$message.warning('*内容不能为空!')
                    }
                })
            },
            fileChange(file, fileList) {
                this.fileList = fileList;
                this.fileData.fileName = file.name.split('.')[0]
                console.log(file);
            },
            HandleAcess(row, flag) {
                row.certCheckFlag = flag;
                row.certCheckBy = SiteConfig.account.id;
                row.certCheckByName = SiteConfig.account.userName;
                row.certImage = null;
                HttpUtil.get('HighWayCertinfo/Update', row).success((res) => {
                    this.getWorkerDetail();
                })
            },
            getFileList() {
                HttpUtil.get('HighWay/FileList', this.fileData).success((res) => {
                    this.file_list = res.data;
                    this.uploadVisible = true;
                })
            },
            handleUpload(row) {
                this.fileData.typeId = row.Id;
                this.fileData.type = 1;
                this.getFileList();

            },
            submitUpload() {
                if (this.fileList.length == 0) {
                    this.$message({
                        type: 'info',
                        message: '必须选择文件'
                    });
                    return;
                }
                this.$refs.upload3.submit();
                this.$refs.upload3.clearFiles();
                setTimeout(() => {
                    this.getFileList();
                }, 1000)

            },
            handleClose(done) {
                this.$refs.upload3.clearFiles();
                this.fileList = [];
                done();
            },
            handleDown(row) {
                if (row.filePath) {
                    this.$message.success('导出成功!');
                    window.location = SiteConfig.webApiset + row.filePath;
                } else {
                    this.$message.warning('无审核文件,请先上传后下载');
                }
            },
            delFile(row) {
                HttpUtil.get('HighWay/FileDelete', {
                    Id: row.Id
                }).success((res) => {
                    this.$message.success('删除成功!');
                    this.getFileList();
                })
            },
            uploadFiles(res) {
                if (res.state == 0) {
                    this.getFileList();
                } else {
                    this.$message({
                        type: 'error',
                        message: '上传错误' + res.errMsg
                    })
                }
            }
        },
        created: function () {
            $('.page').show();
            HttpUtil.get('User/Child', {parentId: SiteConfig.account.id}).success((r) => {
                if (r.state == 0) {
                    // for (let i in r.data) {
                    //     if (r.data[i].attributes.departmentName)
                    //         r.data[i].userName = r.data[i].userName + '-' + r.data[i].attributes.departmentName;
                    // }
                    this.userList = r.data;
                }
                else {
                    this.$message({
                        type: 'error',
                        message: '错误信息' + r.errMsg
                    })
                }
            });
            // this.param.workId = HttpUtil.getQueryString('workId');
        },
        mounted: function () {
            this.headers = {
                uid: SiteConfig.account.uId,
                token: SiteConfig.account.accessToken
            };
            this.roleId = SiteConfig.account.roleId;
            this.imageUrl = SiteConfig.webApiset;
            this.getWorkerDetail();
        }
    });
</script>

</body>
</html>
